<template>
  <div class="competition-list">
    <grid-content>
      <template #left>
        <a-card  class="card" size="small"  style="width: 100%">
          <a-form  layout="inline"  :model="queryForm" >
            <a-form-item style="margin-bottom: 10px" label="ID">
              <a-input v-model:value="queryForm.contestId" placeholder="输入ID" />
            </a-form-item>
            <a-form-item style="margin-bottom: 10px" label="赛制">
              <a-select
                  style="width: 120px"
                  ref="select"
                  v-model:value="queryForm.type"
                  :options="COMPETITION_TYPE"
                  @focus="focus"
                  @change="handleChange"
              />
            </a-form-item>
            <a-form-item style="margin-bottom: 10px" label="进程">
              <a-select
                  ref="select"
                  v-model:value="queryForm.progress"
                  style="width: 120px"
                  :options="COMPETITION_STATUS"
                  @focus="focus"
                  @change="handleChange"
              />
            </a-form-item>
            <a-form-item style="margin-bottom: 10px" label="类型">
              <a-select
                  ref="select"
                  v-model:value="queryForm.auth"
                  style="width: 120px"
                  :options="COMPETITION_AUTH"
                  @focus="focus"
                  @change="handleChange"
              />
            </a-form-item>
            <a-form-item style="margin-bottom: 10px" label="创建人">
              <a-input  v-model:value="queryForm.nickName" placeholder="输入创建人昵称" />
            </a-form-item>
            <a-form-item style="margin-bottom: 10px" label="比赛名称">
              <a-row  :gutter="16">
                <a-col>
                  <a-input v-model:value="queryForm.title" placeholder="输入比赛名称" />
                </a-col>
                <a-col>
                  <a-button html-type="submit"  type="primary" @click="query">查询</a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </a-form>
          <a-table
              :loading="loading"
              :scroll="{ x: 768 }"
              style="margin-top: 10px"
              :pagination="pagination"
              :columns="columns" :data-source="data">
            <template #bodyCell="{ column, text , record }">
              <template v-if="column.dataIndex === 'title'">
                <a-tooltip placement="top">
                  <template #title>
                    {{text}}
                  </template>
                  <a @click="() => {$router.push(`/contest/${record.id}`)}">{{ text }}</a>
                </a-tooltip>
              </template>
              <template v-else-if="column.dataIndex === 'progress'">
                <div v-if="record.type !=null"> <a-tag color="cyan">{{getLabelByValue(COMPETITION_TYPE ,record.type)}}</a-tag> </div>
                <div style="margin: 3px 0" v-if="record.auth!=null"><a-tag color="purple">{{getLabelByValue(COMPETITION_AUTH ,record.auth)}}</a-tag></div>
                <div><a-tag color="blue">{{getLabelByValue(COMPETITION_STATUS ,getDateStatus(record.startTime,record.endTime))}}</a-tag></div>
              </template>
              <template v-else-if="column.dataIndex === 'startTime'">
                <span>{{$dataUtils.parseTime(text)}}</span>
              </template>
              <template v-else-if="column.dataIndex === 'endTime'">
                <span>{{$dataUtils.parseTime(text)}}</span>
              </template>
              <template v-else-if="column.dataIndex === 'duration'">
                <span>{{calculateMatchDuration(record.startTime,record.endTime)}}</span>
              </template>
              <template v-else-if="column.dataIndex === 'userVO'">
                <a>{{text?.nickName}}</a>
              </template>
            </template>
          </a-table>
        </a-card>
      </template>
      <template #right>
        <a-card  class="card" size="small" title="最近开始" style="width: 100%;position: sticky;top: 80px">
          <a-table
              :showHeader="false"
              :pagination="false"
              :columns="recentlyColumns"
              :data-source="recentlyData">
            <template #bodyCell="{ column, text ,record}">
              <template v-if="column.dataIndex === 'name'">
                <a>{{ text }}</a>
              </template>
              <template v-else-if="column.dataIndex === 'title'">
                <a-tooltip placement="top">
                  <template #title>
                    {{text}}
                  </template>
                  <a @click="() => {$router.push(`/contest/${record.id}`)}">{{ text }}</a>
                </a-tooltip>
              </template>
              <template v-else-if="column.dataIndex === 'startTime'">
                <span>{{calculateMatchDuration(null,text)}}</span>
              </template>
              <div v-else-if="column.dataIndex == 'type'">
                <a-tag color="cyan">{{getLabelByValue(COMPETITION_TYPE ,text)}}</a-tag>
              </div>
            </template>
          </a-table>
        </a-card>
      </template>
    </grid-content>
  </div>
</template>

<script lang="ts" setup>
import {calculateMatchDuration,getDateStatus} from "@/utils/date";
import GridContent from "@/components/GridContent"
import {COMPETITION_TYPE,COMPETITION_AUTH,COMPETITION_STATUS,getLabelByValue} from "@/common/enum"
import * as api from "@/api/contest"
import {computed, reactive, ref} from 'vue';
import type { UnwrapRef } from 'vue';
import type { SelectProps } from 'ant-design-vue';
import {getJudgeList} from "@/api/judge";
import {getRecentlyContest} from "@/api/contest";
onMounted(() => {

  getRecentlyContest({
    pageSize: 5,
    pageNum: 1
  }).then(res => {
    recentlyData.value = res.data.rows;
  })
  init();
})

interface queryForm {
  contestId?:string,
  type?: number;
  auth?: number;
  pwd?: number;
  nickName?: string;
  progress?:number;
  title?:string;
}
const queryForm: UnwrapRef<queryForm> = reactive({
});
const handleChange = (value: string) => {
 // console.log(`selected ${value}`);
};
const query = () => {
  pagination.current = 1;
  init();
}

const loading = ref<boolean>(false)
const init = async () => {

  loading.value = true;
  const params = {
    pageNum:pagination.current,
    pageSize:pagination.pageSize
  }
  const res = await api.getContestList(queryForm,params);
  //console.log(res.data)
  data.value = res.data.rows
  pagination.total = res.data.total
  loading.value = false;
}
const current = ref(1)
const pageSize = ref(5);
const pagination = reactive({
  total: 200,
  current: 1,
  pageSize: 10,
  pageSizeOptions:['5', '10', '15', '20']

});
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80,
  },
  {
    title: '比赛名称',
    dataIndex: 'title',
    key: 'title',
    ellipsis:true,

  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    key: 'startTime',
  }, {
    title: '结束时间',
    dataIndex: 'endTime',
    key: 'endTime',
  },
  {
    title: '时长',
    dataIndex: 'duration',
    key: 'duration',
  },
  {
    title: '状态',
    dataIndex: 'progress',
    key: 'progress',
  },
  {
    title: '创建人',
    dataIndex: 'userVO',
    key: 'userVO',
  },
];
const data = ref([]);




//最近开始
const recentlyColumns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis:true,

  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    ellipsis: true,
    align:"right",
    width:100

  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    key: 'startTime',
    ellipsis:true,
    width:150

  },
]
const recentlyData = ref();
</script>
<style scoped>

</style>
